<template>
	<view class="listright">
		<view class="touxiang">
			<image :src="item.userPic" class="img"></image>
			<view class="tianjia" v-show="show">
				<uni-icons :type="type" color="white" size="15" @click="changeicon()"></uni-icons>
			</view>
		</view>
		<uni-icons custom-prefix="iconfont" type="icon-aixin" :color="color" size="35" @click="changeColor()">
		</uni-icons>
		<view class="number">123</view>
		<uni-icons custom-prefix="iconfont" type="icon-pinglun-copy" color="white" size="27" @click="pinglunqu">
		</uni-icons>
		<view class="number">521</view>
		<uni-icons custom-prefix="iconfont" type="icon-shoucang" :color="color1" size="30" @click="changeshouchang()">
		</uni-icons>
		<view class="number">456</view>
		<uni-icons custom-prefix="iconfont" type="icon-zhuanfa" color="white" size="28" @click="changezhuangfa()">
		</uni-icons>
		<view class="number">456</view>
		<view class="around">
			<image :src=src class="img"></image>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	import video from '../../store/video';
	export default {
		name: "list-Right",
		props: {
			item: {
				type: Object,
				default: {}
			},
		},
		data() {
			return {
				//一直转的东西
				src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202105%2F11%2F20210511193549_08e64.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672470259&t=668e96d178de2e9a040edb5435a7d3f4',
				//2秒后隐藏
				show: true,
				//点赞
				color: '',
				//收藏
				color1: '',
				//点击关注
				type: 'plusempty',
				//打开评论区
				pinglun: true


			};
		},
		onLoad() {
			
		},
		
		computed: {
			...mapState('m_user', ['token']),
			...mapState('m_video', ['love'])
		},
		methods: {
			...mapMutations('m_video', ['addvideo', 'addshoucang', 'removevideo', 'removeshoucang','changelove']),
			...mapMutations('m_user', ['updateRedirectInfo']),
			//点击关注
			changeicon() {
				//检测用户是否登录
				if (!this.token) return this.delayNavigate()
				this.type = this.type === 'plusempty' ? 'checkmarkempty' : 'plusempty'
				setTimeout(() => {
					this.show = false
				}, 2000)
			},
			//点击爱心变红(即点赞)或者变白(取消点赞)
			changeColor() {
				//检测用户是否登录
				if (!this.token) return this.delayNavigate()
				// this.color = this.color ==='' ? 'red': '' 
				//点赞添加到我的喜欢
				if (this.color = this.color ==='') {
					this.color = 'red'
					const video = {
						id: this.item.id,
						userName: this.item.userName,
						title: this.item.title,
						userPic: this.item.userPic,
						coverUrl: this.item.coverUrl,
						playUrl: this.item.playUrl,
						duration: this.item.duration,
						
					}
					//将得到的视频数据存储到vuex
					this.addvideo(video)
				} else {
					this.color = ''
					//点赞取消添加到我的喜欢
					const deletevideo = {
						id: this.item.id,
						userName: this.item.userName,
						title: this.item.title,
						userPic: this.item.userPic,
						coverUrl: this.item.coverUrl,
						playUrl: this.item.playUrl,
						duration: this.item.duration
					}
					this.removevideo(deletevideo)	
				}
				

			},
			//收藏改变颜色
			changeshouchang() {
				//检测用户是否登录
				if (!this.token) return this.delayNavigate()
				// this.color1 = this.color1 ==='' ? 'yellow': ''
				//点赞添加到我的收藏
				if (this.color1 = this.color1 === '') {
					this.color1 = 'yellow'
					const shoucang = {
						id: this.item.id,
						userName: this.item.userName,
						title: this.item.title,
						userPic: this.item.userPic,
						coverUrl: this.item.coverUrl,
						playUrl: this.item.playUrl,
						duration: this.item.duration
					}
					//将得到的视频数据存储到vuex
					this.addshoucang(shoucang)

				} else {
					this.color1 = ''
					//点赞取消添加到我的收藏
					const deleteshoucang = {
						id: this.item.id,
						userName: this.item.userName,
						title: this.item.title,
						userPic: this.item.userPic,
						coverUrl: this.item.coverUrl,
						playUrl: this.item.playUrl,
						duration: this.item.duration
					}
					this.removeshoucang(deleteshoucang)
					uni.$showMsg('已取消收藏')
                    if(this.shoucang === true) return this.color1 = 'yellow'
				}
			},
			//双击点赞
			change() {
				//检测用户是否登录
				if (!this.token) return this.delayNavigate()
				//点赞添加到我的喜欢
				this.color = 'red'
				const video = {
					id: this.item.id,
					userName: this.item.userName,
					title: this.item.title,
					userPic: this.item.userPic,
					coverUrl: this.item.coverUrl,
					playUrl: this.item.playUrl,
					duration: this.item.duration
				}
				//将得到的视频数据存储到vuex
				this.addvideo(video)
			},
			// 导航到my页面
			delayNavigate() {
				uni.switchTab({
					url: '/pages/my/my',
					// 页面跳转成功之后的回调函数
					success: () => {
						// 调用 vuex 的 updateRedirectInfo 方法，把跳转信息存储到 Store 中
						this.updateRedirectInfo({
							// 跳转的方式
							openType: 'switchTab',
							// 从哪个页面跳转过去的
							from: '/pages/home/home'
						})
					}
				})
			},
			//转发
			changezhuangfa() {
				//检测用户是否登录
				if (!this.token) return this.delayNavigate()
				uni.$showMsg('暂时不能转发')
			},
			//打开评论区
			pinglunqu() {
				//检测用户是否登录
				if (!this.token) return this.delayNavigate()
				this.$emit('open-pinglun', {
					pinglun: this.pinglun
				})
			}

		}
	}
</script>

<style lang="scss">
	.listright {
		width: 80rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		position: relative;

		.touxiang {
			box-sizing: content-box;
			width: 80rpx;
			height: 80rpx;
			background-color: white;
			border-radius: 50%;
			position: relative;
			border: 2px solid white;

			.tianjia {
				z-index: 999;
				left: 20rpx;
				bottom: -20rpx;
				width: 40rpx;
				height: 40rpx;
				background-color: red;
				border-radius: 50%;
				position: absolute;
				text-align: center;
				line-height: 40rpx;
			}

			.img {
				width: 80rpx;
				height: 80rpx;
				background-color: white;
				border-radius: 50%;
				position: relative;
				display: block;
			}
		}

		uni-icons {
			margin-top: 30rpx;
		}

		.number {
			margin-top: 2px;
			font-size: 10px;
			text-align: center;
			color: white;
		}

		.around {
			margin-top: 15px;


			text-align: center;

			.img {
				width: 30px;
				height: 30px;
				border-radius: 50%;
				animation: rotate 1.5s linear 0.2s infinite;
				transform-origin: center;
			}
		}

		@keyframes rotate {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

	}
</style>
